<template>
	<view class="siteOrder">
		<!-- 日期按钮 -->
		<view class="changeTime flex-between">
			<!-- 开始日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="query.start_time" placeholder="开始时间" @change="startDateConfirm">{{startDateValue}}</uni-datetime-picker>
				</view>
			</view>
			
			<!-- 结束日期 -->
			<view style="flex:1" class="date-item">
				<view class="flex-center">
					<uni-datetime-picker type="date" v-model="query.end_time" placeholder="结束时间" @change="endDateConfirm">{{endDateValue}}</uni-datetime-picker>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y sessionList">
			<view class="sessionItem" v-for="item in sessionList">
				<view class="title">
					场次：{{item.session_name}}
					<uni-icons v-show="currentId == item.session_id" class="check" color="#D43030" type="checkbox-filled" size="25"></uni-icons>
					<uni-icons v-show="currentId !== item.session_id" class="check" type="circle" size="24" @click="changeCheck(item.session_id)"></uni-icons>
				</view>
				<view class="content">
					<view>钓场：{{item.place_name}}</view>
					<view>场次状态：{{item.status}}</view>
					<view>发布时间：{{item.create_time}}</view>
					<view>垂钓时间：{{item.fish_hours}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<button class="save" style="margin: 20rpx auto;" @click="goto('/pages/fashingSite/siteOrder/orderRecord')">确认</button>
		</view>
	</view>
</template>

<script>
	// import { query_fish_news } from '@/utils/fishNew/index.js'
	import { get_session_order } from '@/utils/fishNew/index.js'
	export default {
		data() {
			return {
				startDateValue: '开始日期',
				endDateValue: '结束日期',
				currentId: 99,
				sessionList:[],
				query:{
					start_time: '',
					end_time: '',
					fish_place_id: 9,
				}
			}
		},
		onLoad(query) {
			this.query.fish_place_id = query.id
			this.getlist()
		},
		methods: {
			startDateConfirm(e) {
				this.startDateValue = e
				this.query.start_time = e
				get_session_order(this.query).then(res=>{
					this.sessionList = res.data
				})
			},
			endDateConfirm(e) {
				this.endDateValue = e
				this.query.end_time = e
				get_session_order(this.query).then(res=>{
					this.sessionList = res.data
				})
			},
			getlist(){
				get_session_order(this.query).then(res=>{
					this.sessionList = res.data
				})
			},
			goto(url){
				uni.navigateTo({url:url+"?session_id="+this.currentId})
			},
			changeCheck(id) {
				this.currentId = id
			}
		}
	}
</script>

<style scoped lang="scss">
.siteOrder{
	.changeTime{
		height: 100rpx;
		.date-item {
			border-top: 1px solid #dfdfdf;
			text-align: center;
			font-weight: 600;
			padding: 15px 0;
			background-color: #fff;
		}
	}
	.sessionList{
		height: calc(100vh - 250rpx);
		overflow-y: auto;
		background-color: #F3F4F6;
		padding: 20rpx 0;
		.sessionItem{
			background: #fff;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			border-radius: 10px;
			box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
			.title{
				padding: 0 40rpx;
				line-height: 50rpx;
				font-size: 28rpx;
				font-weight: 700;
				text-align: left;
				border-bottom: 1px solid #E5E5E5;
				padding-bottom: 10rpx;
				position: relative;
				.check{
					position: absolute;
					right: 40rpx;
					font-weight: 400;
				}
			}
			.content{
				font-size: 24rpx;
				padding: 20rpx 40rpx 0rpx;
				line-height: 40rpx;
			}
		}
	}
	:deep(uni-button.save){
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 30rpx;
		background: #D43030 !important;
		width: 400rpx !important;
		color: #fff;
		font-size: 24rpx;
	}
}
</style>
